<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>日历</title>
    <link rel="stylesheet" href="../css/index.css">
</head>

<body>
    <div id="calendar">
        <!-- 下拉框 -->
        <div class="header">            
            <button class="btn_year">年</button>
            <button class="btn_month">月</button>

            <div class="month">
                <select>
                    <option value="1">1月</option>
                    <option value="2">2月</option>
                    <option value="3">3月</option>
                    <option value="4">4月</option>
                    <option value="5">5月</option>
                    <option value="6">6月</option>
                    <option value="7">7月</option>
                    <option value="8">8月</option>
                    <option value="9">9月</option>
                    <option value="10">10月</option>
                    <option value="11">11月</option>
                    <option value="12">12月</option>
                </select>
            </div>
            <div class="year">
                <select>
                    <option value="2015">2015年</option>
                    <option value="2016">2016年</option>
                    <option value="2017">2017年</option>
                    <option value="2018">2018年</option>
                    <option value="2019">2019年</option>
                    <option value="2020">2020年</option>
                    <option value="2021">2021年</option>
                    <option value="2022">2022年</option>
                    <option value="2023">2023年</option>
                    <option value="2024">2024年</option>
                    <option value="2025">2025年</option>
                </select>
            </div>
        </div>
        <!-- 主体 -->
        <div class="main">
            <ul>

            </ul>
            <table>
                <tr>
                    <td value = "1">1月</td>
                    <td value = "2">2月</td>
                    <td value = "3">3月</td>
                </tr>
                <tr>
                    <td value = "4">4月</td>
                    <td value = "5">5月</td>
                    <td value = "6">6月</td>
                </tr><tr>
                    <td value = "7">7月</td>
                    <td value = "8">8月</td>
                    <td value = "9">9月</td>
                </tr><tr>
                    <td value = "10">10月</td>
                    <td value = "11">11月</td>
                    <td value = "12">12月</td>
                </tr>
            </table>

        </div>
    </div>
    <script src="https://unpkg.com/dayjs@1.8.21/dayjs.min.js"></script>
    <script src="../js/index.js"></script>
    <script>

        dayjs().format()
        const calendar = new Calendar("#calendar")
        calendar.getCurrentTime()
        calendar.randerCalender()
        calendar.clickChangeColor()
        calendar.clickChangePage()
    </script>
</body>

</html>